before

Internet Explorer			Chrome		Opera			Safari			Firefox
7.0	8.0	9.0	7.0	8.0	9.6	10.0	10.0	3.1	4.0	5.0	3.0	3.6	4.0
Ні	Так	Так	Так	Так	Так	Так	Так	Так	Так	Так	Так	Так	Так

Коротка інформація

CSS	CSS2
Значення за умовчанням	Ні
Наслідує	Ні
Застосовується	До усіх елементів
Аналог HTML	Ні
Посилання на специфікацію	http://www.w 3.org/TR/CSS21/selector.html#before - and - after

Опис

Псевдоелемент before застосовується для відображення бажаного контенту до елементу, до якого він додається. Працює спільно з властивістю content.

Для before характерні наступні особливості.

При додаванні before до блокового елементу, значення властивості display може бути тільки: block, inline, none, marker. Усі інші значення трактуватимуться як block.
При додаванні before до вбудованого елементу, display обмежений значеннями inline і none. Усі інші сприйматимуться як inline.
before наслідує стиль від елементу, до якого він додається.

Синтаксис

Елемент: before { content: "текст" }

Значення

Ні.

Приклад

HTML 4.0 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">

<html>

<head>

<title>before</title>

li: before {

content: "¶ "; /* Додаємо бажаний символ перед елементом списку */

}

li {

list - style: none; /* Прибираємо початкові маркери */

}

</style>

</head>

<body>

<ul>

<li>Альфа</li>

<li>Гамма</li>

</ul>

</body>

</html>

У цьому прикладі замість стандартних маркерів списку за допомогою псевдоелементу before виводиться символ ¶. Результат прикладу продемонстрований на мал. 1.

Мал. 1. Використання псевдоелементу before в списках

Браузери

Opera 9.2 враховує усі пропуски, начебто вони були поміщені в тег <PRE>.

Браузер Firefox до другої версії включно нестабільно працює з елементами, що позиціонуються, а також не застосовує before до тега <FIELDSET>.